# Selector / Select

### Código

```
<select></select>
```

### Tokens

**Color**

| Class                 | Property   | Color toke  |
| :-------------------- | :--------- | :---------- |
| `.bx--select-input`   | background | `$field-01` |
| `.bx--select--light`  | background | `$field-02` |
| `.bx--select--inline` | background | transparent |
| `.bx--label`          | text color | `$text-01`  |
| `.bx--select-input`   | text color | `$text-01`  |
| `.bx--select--inline` | text color | `$icon-01`  |
| `.bx--select__arrow`  | fill       | `$icon-01`  |

| Class                             | Property   | Color token    |
| :-------------------------------- | :--------- | :------------- |
| `.bx--select-input:focus`         | border     | `$focus`       |
| `.bx--select-input[data-invalid]` | border     | `$support-01`  |
| `.bx--form-requirement`           | text color | `$support-01`  |
| `.bx--select-input:disabled`      | background | `$disabled-01` |
| `.bx--select-input:disabled`      | text color | `$disabled-02` |

**Tipografía**

| Class                   | Type token       |
| :---------------------- | :--------------- |
| `.bx--label`            | `$label-01`      |
| `.bx--select-input`     | `$body-short-01` |
| `.bx--select--inline`   | `$body-short-01` |
| `.bx--form-requirement` | `$label-01`      |

**Estructura**

| Class                     | Property                    | Spacing token |
| :------------------------ | :-------------------------- | :------------ |
| `.bx--select-input`       | height                      | –             |
| `.bx--label`              | margin-bottom               | `$spacing-03` |
| `.bx--select-input`       | padding-left                | `$spacing-05` |
| `.bx--select__arrow`      | padding-left, padding-right | `$spacing-05` |
| `.bx--select-input`       | border-bottom               | –             |
| `.bx--select-input:focus` | border                      | –             |